<template>
  <div class="box">
    <el-row style="display: flex;">
      <el-menu
        popper-append-to-body
        default-active="2"
        class="el-menu-vertical-demo"
        @select="selectFn"
      >
        <el-submenu index="1">
          <template slot="title">
            <span>我的任务</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="1-1">待认领({{ current1 || 0 }})</el-menu-item>
            <el-menu-item index="1-2">处理中({{ current3 || 0 }})</el-menu-item>
            <el-menu-item index="1-3">总部介入中({{ current2 || 0 }})</el-menu-item>
            <el-menu-item index="1-4">已完结({{ current4 || 0 }})</el-menu-item>
            <el-menu-item index="1-5">我发起的</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">
            <span>本网点任务</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="2-1">收到的任务</el-menu-item>
            <el-menu-item index="2-2">发起的任务</el-menu-item>

          </el-menu-item-group>
        </el-submenu>

      </el-menu>
      <div>
        <!-- <template>
                <notReceived/>
            </template> -->
        <div class="box">
          <el-row class="flex">
            <div class="right">
              <el-tabs v-model="activeName" @tab-click="handleClick">

                <el-row>
                  <el-col :span="24">
                    <div class="header">

                      <el-form ref="form" :model="form" label-width="100px" class="flex-start ">
                        <el-form-item label="运单号">
                          <el-input v-model="form.transportCode" placeholder="请输入" style="width:286px" />
                        </el-form-item>
                        <el-form-item label="创建时间">
                          <el-date-picker
                            v-model="value1"
                            type="daterange"
                            format="yyyy 年 MM 月 dd 日"
                            value-format="yyyy-MM-dd"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            @change="datachangeFn()"
                          />
                        </el-form-item>
                        <el-form-item label="目的网点">
                          <el-input v-model="form.aimNetworkNameId" placeholder="目的网点" style="width:286px" />
                        </el-form-item>

                        <el-form-item>
                          <el-button type="primary" @click="onSubmit">查询</el-button>
                          <el-button @click="resetting">重置</el-button>
                        </el-form-item>
                        <div style="display: flex;">

                          <el-form-item label="是否已回复">
                            <el-select v-model="form.isReturn" placeholder="请选择" style="width:286px">
                              <el-option label="是" value="0" />
                              <el-option label="否" value="1" />
                            </el-select>
                          </el-form-item>
                          <el-form-item label="是否收藏">
                            <el-select v-model="form.isCollect" placeholder="请选择" style="width:286px">
                              <el-option label="是" value="0" />
                              <el-option label="否" value="1" />
                            </el-select>
                          </el-form-item>
                          <el-form-item label="发起的网点">
                            <el-input v-model="form.startNetworkNameId" placeholder="发起的网点" style="width:286px" />
                          </el-form-item>
                          <!-- <el-form-item label="任务状态">
                                    <el-select v-model="form.taskStatus" placeholder="请选择" style="width:286px">
                                        <el-option label="待认领" value="waiting"></el-option>
                                        <el-option label="处理中" value="dealing"></el-option>
                                        <el-option label="总部介入中" value="headIntervention"></el-option>
                                        <el-option label="已完结" value="finish"></el-option>
                                    </el-select>
                                   </el-form-item> -->
                          <el-button type="text" class="butt-show" @click="queryshow=!queryshow">展示更多</el-button>
                        </div>
                        <div v-if="queryshow" style="display: flex;">
                          <el-form-item label="订单网点">
                            <el-input v-model="form.orderNetworkNameId" placeholder="请输入" style="width:286px" />
                          </el-form-item>
                          <el-form-item label="处理网点">
                            <el-input v-model="form.processNetworkNameId" placeholder="处理网点" style="width:286px" />
                          </el-form-item>
                          <el-form-item label="处理人">
                            <el-input v-model="form.processer" placeholder="处理人" style="width:286px" />
                          </el-form-item>
                        </div>
                        <div v-if="queryshow" style="display: flex;">
                          <el-form-item label="任务类型">
                            <el-input v-model="form.taskType" placeholder="任务类型" style="width:286px" />
                          </el-form-item>
                          <el-form-item label="介入原因">
                            <el-input v-model="form.hqInterveneReason" placeholder="请输入" style="width:286px" />
                          </el-form-item>
                          <el-form-item label="进出港">
                            <el-input v-model="form.enterLeavingPort" placeholder="请输入" style="width:286px" />
                          </el-form-item>
                        </div>
                      </el-form>

                      <!-- <el-row>
                            <span style="font-size: 15px; margin-right: 5px;"> 快速筛选</span>
                            <el-badge :value="current0" class="item">
                         <el-button size="small"  @click="screenFn('')">全部</el-button>
                          </el-badge>
                         <el-badge :value="current1" class="item">
                          <el-button size="small" @click="screenFn('waiting')">待认领</el-button>
                          </el-badge>
                          <el-badge  :value="current2"  class="item" >
                          <el-button size="small" @click="screenFn('headIntervention')">总部介入中</el-button>
                         </el-badge>
                         <el-badge  :value="current3"  class="item" >
                         <el-button size="small" @click="screenFn('dealing')">处理中</el-button>
                         </el-badge>
                         <el-badge :value="current4"  class="item">
                         <el-button size="small" @click="screenFn('finish')">已完结</el-button>
                         </el-badge>
                          </el-row> -->
                      <el-row>
                        <span style="font-size: 15px; margin-right: 5px;"> 已选择{{ checklist.length }}/{{ current }}条</span>
                        <el-button size="small" @click="allocation()">批量分配</el-button>
                        <el-button size="small" @click="network()">批量转交网点</el-button>
                        <el-button size="small" @click="replyFn()">批量回复</el-button>
                        <el-button size="small" @click="collectFn()">批量收藏</el-button>
                        <template>
                          <el-button size="small" type="primary" style="float:right" icon="el-icon-upload2" @click="excel()">导出</el-button>
                          <el-checkbox v-model="timeout" style="float:right;margin-top: 10px;" @change="chechange('timeout')">仅展示超时</el-checkbox>
                          <el-checkbox v-model="checked" style="float:right;margin-top: 10px;" @change="chechange('checked')">仅展示新回复</el-checkbox>
                          <el-checkbox v-model="emerg" style="float:right;margin-top: 10px;margin-right: 14px;" @change="chechange('emerg')">仅展示紧急</el-checkbox>
                        </template>
                      </el-row>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <div>
                      <el-table
                        ref="multipleTable"
                        v-loading="loading"
                        :data="tableData"
                        tooltip-effect="dark"
                        style="width: 100%"
                        border
                        @selection-change="handleSelectionChange"
                      >
                        <el-table-column type="selection" width="55" />
                        <el-table-column
                          type="index"
                          width="50"
                        />
                        <el-table-column prop="transportCode" label="运单号" width="120">
                          <template slot-scope="scope">
                            <span>{{ scope.row.transportCode }}</span>
                            <el-tag
                              v-if="scope.row.enterLeavingPort!==null"
                              type="info"
                              disable-transitions
                            >{{ scope.row.enterLeavingPort }}
                            </el-tag>
                          </template>
                        </el-table-column>
                        <el-table-column prop="aimNetworkNameId" label="目的网点" show-overflow-tooltip />
                        <el-table-column prop="hqInterveneReason" label="介入原因" width="120" />
                        <el-table-column prop="isCollect" label="是否收藏" width="120">
                          <template slot-scope="scope">
                            <span>{{ scope.row.isCollect==0 ?'是':'否' }}</span>
                          </template>
                        </el-table-column>
                        <el-table-column prop="isReturn" label="是否已回复" width="120">
                          <template slot-scope="scope">
                            <span>{{ scope.row.isReturn==0 ?'是':'否' }}</span>
                          </template>
                        </el-table-column>
                        <el-table-column prop="orderNetworkNameId" label="订单网点" width="120" />
                        <el-table-column prop="processNetworkNameId" label="处理网点" width="120" />
                        <el-table-column prop="processer" label="处理人" width="120" />
                        <el-table-column prop="startNetworkNameId" label="发起网点" width="120" />
                        <el-table-column prop="taskStatus" label="任务状态" width="120">
                          <template slot-scope="scope">
                            <el-tag
                              :type="scope.row.taskStatus === 'waiting' ? 'primary' : 'success'"
                              disable-transitions
                            >{{ scope.row.taskStatus=='waiting' ?'待认领':scope.row.taskStatus=='dealing' ?'处理中':scope.row.taskStatus=='headIntervention' ?'总部介入中':scope.row.taskStatus=='finish' ?'已完结':'' }}
                            </el-tag>
                          </template>
                        </el-table-column>
                        <el-table-column prop="taskType" label="任务类型" width="120" />
                        <el-table-column label="操作">
                          <template slot-scope="scope">
                            <el-button
                              type="text"
                              size="small"
                              @click.native.prevent="deleteRow(scope.id)"
                            >
                              查看
                            </el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                    </div>
                  </el-col>
                </el-row>

                <div class="block" style="display: flex; justify-content: flex-end;">
                  <el-pagination
                    :current-page="currentPage4"
                    :page-sizes="[100, 200, 300, 400]"
                    :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="current"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                  />
                </div>

              </el-tabs>
            </div>
          </el-row>

          <el-dialog
            title="提示"
            clearable
            :visible.sync="dialogshow"
            width="30%"
            :before-close="handleClose"
          >
            <el-input
              v-model="textarea"
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
            />
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogshow = false">取 消</el-button>
              <el-button type="primary" @click="adddialog() ">确 定</el-button>
            </span>
          </el-dialog>
          <!-- 批量分配 -->
          <el-dialog
            title="批量分配"
            clearable
            :visible.sync="dialog"
            width="20%"
          >
            <el-select v-model="selevalue" class="dialog-selce" filterable placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.solicitor"
                :value="item.id"
              />
            </el-select>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialog = false">取 消</el-button>
              <el-button type="primary" @click="adddialog2() ">确 定</el-button>
            </span>
          </el-dialog>
          <!-- 批量转网点 -->
          <el-dialog
            title="批量转交网点"
            clearable
            :visible.sync="dialog1"
            width="20%"
          >
            <el-select v-model="selevalue1" class="dialog-selce" filterable placeholder="请选择">
              <el-option
                v-for="item in options1"
                :key="item.id"
                :label="item.networkName"
                :value="item.id"
              />
            </el-select>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialog1 = false">取 消</el-button>
              <el-button type="primary" @click="adddialog3() ">确 定</el-button>
            </span>
          </el-dialog>
        </div>

      </div>
    </el-row>

  </div>
</template>

<script>
import notReceived from '@/views/Customer/commit/notreceived.vue'
import { getList, collectApi, returnContentApi, selectAllApi, nameselectApi, updateListApi } from '@/api/receive'
export default {
  components: {
    notReceived // 收到的任务
  },
  data() {
    return {
      switc: '2-1',
      loading: false,
      activeName: 'first',
      value1: '',
      selevalue: '',
      activeName: 'first',
      queryshow: false,
      dialogshow: false, // 批量回复弹层
      dialog: false,
      dialog1: false,
      textarea: '', // 内容
      selevalue1: '',
      timeout: false,
      emerg: false,
      checked: '',
      options: [],
      options1: [],
      activeName: 'first',
      currentPage4: 1,
      form: { 'aimNetworkNameId': '',
        'code': '',
        'privateDatestartTime': '',
        'privateDateendTime': '',
        'createBy': '',
        'endTime': '',
        'enterLeavingPort': '',
        'hqInterveneReason': '',
        'isCollect': '',
        'isReturn': '',
        'orderNetworkNameId': '',
        'dealStatus': '', // 紧急 1是 非0
        'isRetention': '', // 是否超时  0是 1否
        'pageDate': {
          'pageNum': 1,
          'pageSize': 20
        },
        'processNetworkNameId': '',
        'processer': '',
        'startNetworkNameId': '',
        'startTime': '',
        'taskStatus': '',
        'taskType': '',
        'transportCode': ''
      },
      value1: '',
      tableData: [],
      checklist: [], // 勾选数据
      current: 0,
      current0: '',
      current1: '',
      current2: '',
      current3: '',
      current4: ''
    }
  },
  mounted() {
    // this.getListFn()

  },
  methods: {
    // 揽收人员
    async selectAllApiFn() {
      const res = await selectAllApi()
      if (res.code == 200) {
        this.options = res.data
      } else {
        this.options = []
      }
      console.log(res, '揽收人员')
    },
    // 网点名称
    async nameselectApiFn() {
      const res = await nameselectApi()
      if (res.code == 200) {
        this.options1 = res.data
      } else {
        this.options1 = []
      }
      console.log(res, '网点名称')
    },

    selectFn(data) {
      this.switc = data
      console.log(data, '导航')
      if (data == '2-1') { // 收到的任务
        this.form.code = 'selectGet'
        this.form.taskStatus = ''
      } else if (data == '2-2') { // 发起的任务
        this.form.code = 'selectSend'
        this.form.taskStatus = ''
      } else if (data == '1-5') { // 我发起的
        this.form.code = 'selectMine'
        this.form.taskStatus = ''
      } else if (data == '1-1') { // 待认领
        console.log('待认领')
        this.form.code = ''
        this.form.taskStatus = 'waiting'
      } else if (data == '1-2') { // 处理中
        console.log('处理中')
        this.form.code = ''
        this.form.taskStatus = 'dealing'
      } else if (data == '1-3') { // 总部介入
        console.log('总部介入')
        this.form.code = ''
        this.form.taskStatus = 'headIntervention'
      } else if (data == '1-4') { // 已完结
        console.log('已完结')
        this.form.code = ''
        this.form.taskStatus = 'finish'
      }
      this.getListFn()
    },
    // 列表
    async getListFn() {
      this.loading = true
      const res = await getList(this.form)
      if (res.code == 200) {
        this.loading = false
        this.tableData = res.data.data
        this.current = res.data.total
        if (this.form.taskStatus == '') {
          this.current0 = res.data.total
          this.current1 = ''
          this.current2 = ''
          this.current3 = ''
          this.current4 = ''
        } else if (this.form.taskStatus == 'dealing') { // 处理中
          this.current3 = res.data.total
          this.current1 = ''
          this.current2 = ''
          this.current0 = ''
          this.current4 = ''
        } else if (this.form.taskStatus == 'waiting') { // 待认领
          this.current1 = res.data.total
          this.current0 = ''
          this.current2 = ''
          this.current3 = ''
          this.current4 = ''
        } else if (this.form.taskStatus == 'headIntervention') { // 总部介入
          this.current2 = res.data.total
          this.current1 = ''
          this.current0 = ''
          this.current3 = ''
          this.current4 = ''
        } else if (this.form.taskStatus == 'finish') { // 已完结
          this.current4 = res.data.total
          this.current1 = ''
          this.current2 = ''
          this.current3 = ''
          this.current0 = ''
        }
      } else {
        this.loading = false
        this.tableData = []
      }
      console.log(res)
    },
    // 查询
    onSubmit() {
      this.getListFn()
    },
    chechange(val) {
      console.log('1111', val)
      if (val == 'timeout') { // 紧急
        if (this.timeout) {
          this.form.dealStatus = 1
        } else {
          this.form.dealStatus = 0
        }
        this.form.isRetention = 1
        this.checked = false
        this.emerg = false
      } else if (val == 'checked') { // 回复
        this.timeout = false
        this.emerg = false
        this.form.dealStatus = 0
        this.form.isRetention = 1
      } else if (val == 'emerg') { // 超时
        if (this.emerg) {
          this.form.isRetention = 0
        } else {
          this.form.isRetention = 1
        }
        this.form.dealStatus = 0
        this.timeout = false
        this.checked = false
      }
      this.getListFn()
    },
    excel() {
      if (this.checklist.length == 0) {
        this.$message.warning('请勾选需要导出的数据')
      } else {
        this.$confirm('确定下载列表文件?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.excelData = this.checklist // 存储表格中选择的行的数据。
          this.export2Excel()
        }).catch(() => {
        })
      }
    },
    // 数据写入excel
    export2Excel() {
      var that = this
      require.ensure([], () => {
        const { export_json_to_excel } = require('@/excel/Export2Excel') // 这里必须使用绝对路径
        const tHeader = ['运单号', '目的网点', '介入原因', '是否收藏', '是否已回复', '订单网点', '处理网点', '处理人', '发起网点', '任务状态', '任务类型'] // 导出的表头名信息
        const filterVal = ['transportCode', 'aimNetworkNameId', 'hqInterveneReason', 'isCollect', 'isReturn', 'orderNetworkNameId', 'processNetworkNameId', 'processer', 'startNetworkNameId', 'taskStatus', 'taskType'] // 导出的表头字段名，需要导出表格字段名
        const list = that.excelData
        const data = that.formatJson(filterVal, list)
        export_json_to_excel(tHeader, data, 'excel表格名字')// 导出的表格名称，根据需要自己命名
      })
    },
    // 格式转换，直接复制即可
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    datachangeFn(val) {
      console.log(this.value1, '时间')
      if (this.value1.length > 0) {
        this.form.privateDatestartTime = this.value1[0]
        this.form.privateDateendTime = this.value1[1]
      }
    },
    // 批量收藏
    async collectFn() {
      if (this.checklist.length == 0) {
        this.$message.warning('请勾选需要收藏的数据')
      } else {
        const arr = this.checklist.map(item => item.id)
        console.log(arr, '收藏')
        const res = await collectApi({ 'ids': arr.join() })
        if (res.code == 0) {
          this.$message.success(res.msg)
        } else {
          this.$message.success(res.msg)
        }
      }
    },

    // 批量回复
    replyFn() {
      if (this.checklist.length == 0) {
        this.$message.warning('请勾选需要回复的数据')
      } else {
        this.dialogshow = true
      }
    },
    // 回复确定
    async adddialog() {
      const arr = this.checklist.map(item => item.id)
      console.log(arr, '收藏')
      const res = await returnContentApi({ 'content': this.textarea, 'returnIds': arr.join() })
      if (res.code == 200) {
        this.$message.success(res.msg)
        this.dialogshow = false
      } else {

      }
    },
    // 批量分配
    allocation() {
      if (this.checklist.length == 0) {
        this.$message.warning('请勾选需要分配的数据')
      } else {
        this.dialog = true
        this.selectAllApiFn()
      }
    },
    async adddialog3() {
      const id = this.checklist.map(item => item.id)
      const res = await updateListApi({

        'ids': id,
        'networkNameId': this.selevalue1

      })

      if (res.code == 200) {
        this.$message.success(res.msg)
        this.dialog1 = false
      } else {

      }
    },
    // 批量转交网点
    network() {
      if (this.checklist.length == 0) {
        this.$message.warning('请勾选需要转交网点的数据')
      } else {
        this.dialog1 = true
        this.nameselectApiFn()
      }
    },
    // 确定
    async adddialog2() {
      console.log(this.selevalue)
      const id = this.checklist.map(item => item.id)
      const res = await updateListApi({
        'ids': id,
        'processerId': this.selevalue
      })

      if (res.code == 200) {
        this.$message.success(res.msg)
        this.dialog = false
      } else {

      }
    },
    // 移除
    deleteRow(id) {

    },
    // 关闭弹层
    handleClose() {
      this.dialogshow = false
    },
    // 快速筛选
    screenFn(val) {
      this.form.taskStatus = val
      this.getListFn()
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },

    // 当前页
    handleCurrentChange(val) {
      this.form.pageDate.pageNum = val
      this.getListFn()
      console.log('当前页', val)
    },
    // 每页条数
    handleSizeChange(val) {
      this.form.pageDate.pageSize = val
      this.getListFn()
      console.log('每页', val)
    },
    // 勾选
    handleSelectionChange(val) {
      console.log(val, '勾选')
      this.checklist = val
    },
    // 重置
    resetting() {
      this.form.aimNetworkNameId = ''
      this.form.createBy = '',
      this.form.endTime = ''
      this.form.enterLeavingPort = ''
      this.form.hqInterveneReason = ''
      this.form.isCollect = ''
      this.form.isReturn = ''
      this.form.orderNetworkNameId = ''
      this.form.processNetworkNameId = ''
      this.form.processer = ''
      this.form.startNetworkNameId = ''
      this.form.startTime = ''
      this.form.taskStatus = ''
      this.form.taskType = ''
      this.form.transportCode = ''
    }

  }

}
</script>

<style lang="scss" scoped>
.box {
    width: calc(100vw - 240px);
    padding: 20px;
    min-height: calc(90vh - 70px);
    background-color: white;
    display: flex;
    justify-content: flex-start;
    flex-flow: column;
    box-sizing: border-box;
}
.butt-show{
    margin: 0 0 20px 168px;
}
.ll{
    display: flex;
    flex-flow: column;
    height: 100px;
    justify-content: space-around;
}
.el-submenu__title span{
    font-weight: 700;
}
.el-badge {
    margin: 0 10px;
}
.left {
    width: 320px;
    display: flex;
    background-color: white;
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    border: 1px solid #ccc;
    height: 800px;

    .l-top {
        width: 320px;
        border-bottom: 1px solid #ccc;
        height: 20%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .l-btom {
        margin-top: 20px;
    }
}

.right {
    padding: 20px;
    background-color: rgba(204, 204, 204, 0);
    display: flex;
    flex-flow: column;
    margin-left: 20px;
    width: 85vw;
    border: 1px solid #ccc;
    height: 800px;

    .r-top{
        background-color: white;
    }

}
.el-menu{

    border-right:none;
}
.dialog-selce{
    width: 300px;
}
.flex-bettom{
    display: flex;
    justify-content: space-between;
}
.r-btom{
    height: 100%;
    display: flex;
    flex-flow: column;
    margin-top: 20px;
    padding: 20px;
    background-color: white;
}
.font-20{
    font-size: 20px;
}
.font-16{
    font-size: 16px;
    color: #666666;
    padding: 20px 0;
}

.flex {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-start {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}

.header {
    padding-bottom: 20px;
    border-bottom: 1px solid #ccc;
}

.el-row {
    margin-bottom: 20px;

    &:last-child {
        margin-bottom: 0;
    }
}

.el-col {
    border-radius: 4px;
}

.bg-purple-dark {
    background: #99a9bf;
}

.bg-purple {
    background: #d3dce6;
}

.bg-purple-light {
    background: #e5e9f2;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}</style>
